/**
 * echarts横排柱状图样式
 *
 * @param id    容纳横排柱状图表容器id
 * @param title 横排柱状图表标题
 * @param dataY y轴类目数据
 * @param data  横排柱状图表数据
 */
function horizontalBarChart(id,title,dataY,data)
{
    //根据传入的参数id获取对应的控件对象
    let idName = document.getElementById(id);
    //基于准备好的容器idName，初始化echart实例
    let myChart = echarts.init(idName);
    //option：用来设置图表的配置项以及数据
    let option;
    option =
        {
            //设置图标标题样式
            title:
                {
                    //标题内容
                    text: title,
                    //设置标题居中
                    left: 'center',
                    //设置标题距离容器上边界为容器高度的5%
                    top: '5%',
                    //设置标题字体样式
                    textStyle:
                        {
                            //将标题的字体大小设置为20px
                            fontSize: '20',
                            //设置标题的颜色
                            color: 'rgba(0,173,240,1)'
                        }
                },
            //设置提示框，即当用户滑过或点击图标的显示框
            tooltip:
                {
                    //设置触发类型，axis为坐标轴触发，即当用户鼠标滑过对应坐标轴区域就会触发提示
                    trigger: 'axis',
                },

            //设置图表与容器之间的距离
            grid:
                {
                    left: '3%',
                    right: '10%',
                    top: '10%',
                    bottom: '4%',
                    //设置区域包含坐标轴的刻度标签，防止图表溢出
                    containLabel: true
                },
            //设置图标的y轴
            yAxis:
                {
                    //设置y轴为类目轴，让其显示为横向
                    type: 'category',
                    //类目轴的数据
                    data: dataY,
                    axisTick:
                        {
                            //隐藏y轴刻度线
                            show: false,
                        },
                    axisLine:
                        {
                            //隐藏y轴
                            show: false,
                        }
                },
            //设置x轴样式
            xAxis:
                {
                    //设置x轴为数值轴，让其显示为横向
                    type: 'value',
                    splitLine:
                        {
                            //取消x轴的网格
                            show: false,
                        },
                    axisTick:
                        {
                            //隐藏刻x轴度线
                            show: false,
                        },
                    axisLine:
                        {
                            //隐藏x轴
                            show: false,
                        },
                    axisLabel:
                        {
                            //隐藏x轴上的文字内容
                            show: false,
                        }
                },
            //配置数据区域缩放，防止数据过多叠加
            dataZoom:
                {
                    //应用数据区域缩放
                    show: true,
                    //设置用过通过鼠标轮滑滑动进行数据区域的缩放
                    type: 'inside',
                },
            series:
                [{
                    //设置图标为柱状图
                    type: 'bar',
                    //设置tooltip.formatter 的模版变量 {a}的值为：人数
                    name: '人数',
                    //设置柱子的宽度
                    barWidth: '30%',
                    //设置其柱状图中各个柱形的数据，data表示从后台获取的数据
                    data: data,
                    //对单个柱形文本的样式进行设置
                    label:
                        {
                            //设置在每个柱形上显示其对应的数据
                            show:true,
                            //设置显示的位置在横排柱子的右边
                            position: 'right',
                            //设置文本的属性
                            textStyle:
                                {
                                    //将文本颜色设置为黑色
                                    color:'black'
                                }
                        },
                    //设置图形的样式，也就是柱形的样式
                    itemStyle:
                        {
                            normal:
                                {
                                    //设置每个柱形的颜色不同
                                    color: function(params)
                                    {
                                        //变量colorList用于存储柱形的颜色
                                        let colorList = ['red', 'blue', 'green'];
                                        return colorList[params.dataIndex];
                                    },
                                }
                        }
                }]
        };

    //如果体表的配置项及其数据对象option不为空且option的的类型为对象或数组，则加载图表数据
    if (option && typeof option === 'object')
    {
        myChart.setOption(option);
    }

    //设置图表随着屏幕大小改变自适应
    window.addEventListener("resize",function ()
    {
        myChart.resize();
    });
}

/**
 * echarts竖排柱状图样式
 *
 * @param id    容纳竖排柱状图表容器id
 * @param title 竖排柱状图表标题
 * @param dataX 柱状图中x轴文字的数据
 * @param data  竖排柱状图表数据
 */
function verticalBarChart(id,title,dataX,data)
{
    //根据传入的参数id获取对应的控件对象
    let idName = document.getElementById(id);
    //基于准备好的容器idName，初始化echart实例
    let myChart = echarts.init(idName);
    //option：用来设置图表的配置项以及数据
    let option;
    option =
        {
            //设置图标标题样式
            title:
                {
                    //标题内容
                    text: title,
                    //设置标题居中
                    left: 'center',
                    //设置标题距离容器上边界为容器高度的5%
                    top: '5%',
                    //设置标题字体样式
                    textStyle:
                        {
                            //将标题的字体大小设置为20px
                            fontSize: '20',
                            //设置标题的颜色
                            color: 'rgba(0,173,240,1)'
                        }
                },
            //设置提示框，即当用户滑过或点击图标的显示框
            tooltip:
                {
                    //设置触发类型，axis为坐标轴触发，即当用户鼠标滑过对应坐标轴区域就会触发提示
                    trigger: 'axis',
                    //设置坐标轴指示器
                    axisPointer:
                        {
                            //设置为当用户鼠标滑过或点击时阴影显示
                            type: 'shadow'
                        },
                },

            //设置图表与容器之间的距离
            grid:
                {
                    left: '3%',
                    right: '10%',
                    top: '20%',
                    bottom: '4%',
                    //设置区域包含坐标轴的刻度标签，防止图表溢出
                    containLabel: true
                },
            //设置x轴样式
            xAxis:
                [
                    {
                        //设置x轴为类目轴
                        type: 'category',
                        //类目数据
                        data: dataX,
                        axisTick:
                            {
                                //隐藏x轴刻度线
                                show: false,
                            },
                        axisLabel:
                            {
                                //设置类目数据与x间的距离
                                margin: 20,
                            },
                    },
                ],
            //设置y轴样式
            yAxis:
                [
                    //第一个y轴数据，用于在左边显示刻度
                    {
                        //设置y轴为数值轴
                        type: 'value',
                        //设置y轴网格
                        splitLine:
                            {
                                lineStyle:
                                    {
                                        //设置y轴网格为虚线
                                        type: 'dashed',
                                        //设置y轴网格的宽度为2
                                        width: 2,
                                    }
                            },
                        axisTick:
                            {
                                //设置y轴刻度隐藏
                                show: false,
                            },
                        axisLine:
                            {
                                //设置y轴隐藏
                                show: false,
                            },

                    },
                    //第二个y轴数据，用于在右边显示单位
                    {
                        //y轴的名称
                        name: '单位：人',
                        //设置y轴名称的文本样式
                        nameTextStyle:
                            {
                                //设置文本颜色为灰色
                                color: 'gray',
                                //设置其显示在右边
                                align: 'right',
                            },
                        axisTick:
                            {
                                //设置y轴刻度隐藏
                                show: false,
                            },
                        axisLine:
                            {
                                //设置y轴隐藏
                                show: false,
                            },
                    }
                ],
            //配置数据区域缩放，防止数据过多叠加
            dataZoom:
                {
                    //应用数据区域缩放
                    show: true,
                    //设置用过通过鼠标轮滑滑动进行数据区域的缩放
                    type: 'inside',
                },
            series:
                [{
                    //设置图标为柱状图
                    type: 'bar',
                    //设置tooltip.formatter 的模版变量 {a}的值为：人数
                    name: '人数',
                    //设置柱子的宽度
                    barWidth: '30%',
                    //设置图形的样式，也就是柱形的样式
                    itemStyle:
                        {
                            //设置柱形的颜色
                            color: 'rgba(0,173,240,1)'
                        },
                    //设置其柱状图中各个柱形的数据，data表示从后台获取的数据
                    data: data,
                }]
        };

    //如果体表的配置项及其数据对象option不为空且option的的类型为对象或数组，则加载图表数据
    if (option && typeof option === 'object')
    {
        myChart.setOption(option);
    }

    //设置图表随着屏幕大小改变自适应
    window.addEventListener("resize",function ()
    {
        myChart.resize();
    });
}

/**
 * echarts折线图样式
 *
 * @param id    容纳折线图表容器id
 * @param title 折线图表标题
 * @param dataX 折线图中x轴的文字数据
 * @param data  折线图表数据
 */
function lineChart(id,title,dataX,data)
{
    //根据传入的参数id获取对应的控件对象
    let idName = document.getElementById(id);
    //基于准备好的容器idName，初始化echart实例
    let myChart = echarts.init(idName);
    //option：用来设置图表的配置项以及数据
    let option;
    option =
        {
            //设置图标标题样式
            title:
                {
                    //标题内容
                    text: title,
                    //设置标题居中
                    left: 'center',
                    //设置标题距离容器上边界为容器高度的5%
                    top: '5%',
                    //设置标题字体样式
                    textStyle:
                        {
                            //将标题的字体大小设置为20px
                            fontSize: '20',
                            //设置标题的颜色
                            color: 'rgba(0,173,240,1)'
                        }
                },
            //设置提示框，即当用户滑过或点击图标的显示框
            tooltip:
                {
                    //设置触发类型，axis为坐标轴触发，即当用户鼠标滑过对应坐标轴区域就会触发提示
                    trigger: 'axis',
                    //设置坐标轴指示器
                    axisPointer:
                        {
                            //设置为当用户鼠标滑过或点击时阴影显示
                            type: 'shadow'
                        },
                },
            //设置图表与容器之间的距离
            grid:
                {
                    left: '3%',
                    right: '10%',
                    top: '20%',
                    bottom: '4%',
                    //设置区域包含坐标轴的刻度标签，防止图表溢出
                    containLabel: true
                },
            //配置数据区域缩放，防止数据过多叠加
            dataZoom:
                {
                    //应用数据区域缩放
                    show: true,
                    //设置用过通过鼠标轮滑滑动进行数据区域的缩放
                    type: 'inside',
                },
            //设置x轴样式
            xAxis:
                {
                    //设置x轴为类目轴
                    type: 'category',
                    //类目数据
                    data: dataX,
                    axisTick:
                        {
                            //隐藏x轴刻度线
                            show: false,
                        },
                    axisLabel:
                        {
                            //设置类目数据与x间的距离
                            margin: 20,
                        },
                },
            //设置y轴样式
            yAxis:
                {
                    //y轴的名称
                    name: '单位：人',
                    //设置y轴名称的文本样式
                    nameTextStyle:
                        {
                            //设置文本颜色为灰色
                            color: 'gray',
                        },
                    splitLine:
                        {
                            lineStyle:
                                {
                                    type: 'dashed',
                                    width: 2,
                                }
                        },
                    axisTick:
                        {
                            //隐藏y轴刻度线
                            show: false,
                        },
                    axisLine:
                        {
                            //隐藏y轴
                            show: false,
                        },

                },
            series:
                [{
                    //设置图标为折线图
                    type: 'line',
                    //设置tooltip.formatter 的模版变量 {a}的值为：人数
                    name: '详情',
                    //设置其柱状图中各个柱形的数据，data表示从后台获取的数据
                    data: data,
                }, ]
        };

    //如果体表的配置项及其数据对象option不为空且option的的类型为对象或数组，则加载图表数据
    if (option && typeof option === 'object')
    {
        myChart.setOption(option);
    }

    //设置图表随着屏幕大小改变自适应
    window.addEventListener("resize",function ()
    {
        myChart.resize();
    });
}

/**
 * echarts饼图样式设置
 *
 * @param id    容纳饼图图标容器id
 * @param title 饼图图标标题
 * @param data  饼图图标数据
 */
function treeChart(id,title,data)
{
    //根据传入的参数id获取对应的控件对象
    let idName = document.getElementById(id);
    //基于准备好的容器idName，初始化echart实例,并且使用主题light
    let myChart = echarts.init(idName,'light');
    //option：用来设置图表的配置项以及数据
    let option;
    option =
        {
            //设置图标标题样式
            title:
                {
                    //标题内容
                    text: title,
                    //设置标题居中
                    left: 'center',
                    //设置标题距离容器上边界为容器高度的5%
                    top: '5%',
                    //设置标题字体样式
                    textStyle:
                        {
                            //将标题的字体大小设置为20px
                            fontSize: '20',
                            //设置标题的颜色
                            color: 'rgba(0,173,240,1)'
                        }
                },
            //设置饼图中图例样式
            legend:
                {
                    //设置为可以滚动翻页的图例
                    type: 'scroll',
                    //设置图例与容器下侧距离
                    bottom: '3%',
                },

            //设置工具栏
            toolbox:
                {
                    //显示工具栏
                    show: true,
                    feature:
                        {
                            //数据试图配置
                            dataView:
                                {
                                    //显示数据试图
                                    show: true,
                                    //设置为只读
                                    readOnly: true
                                },
                            //还原选项配置
                            restore:
                                {
                                    //显示还原选项
                                    show: true
                                },
                            //图片下载设置
                            saveAsImage:
                                {
                                    //显示图片下载
                                    show: true,
                                    //下载的图片格式
                                    type:'png',
                                    //下载的图片名称
                                    name:title,
                                }
                        }
                },
            //设置图表与容器之间的距离
            grid:
                {
                    left: '3%',
                    right: '15%',
                    top: '10%',
                    bottom: '4%',
                    //设置区域包含坐标轴的刻度标签，防止图表溢出
                    containLabel: true
                },
            //设置提示框，即当用户滑过或点击图标的显示框
            tooltip:
                {
                    trigger: 'item',
                    //提示框中的内容格式设置，{a}表示series中设置name值，{b}表示数据中的name，
                    // {c}表示对应扇形的数据，{d}表示该扇形数据所占比例
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
            series:
                [{
                    //设置图标为折线图
                    type: 'pie',
                    //设置tooltip.formatter 的模版变量 {a}的值为：人数
                    name: '详情',
                    //饼图中饼状部分的大小所占整个容器的百分比
                    radius: "50%",
                    //整个饼图在整个容器中的位置
                    center: ['50%', '50%'],
                    roseType: 'radius',
                    //防止标签重叠
                    avoidLabelOverlap:true,
                    //设置扇区最小角度
                    minAngle:5,
                    //设置饼图图形上的文本
                    label:
                        {
                            normal:
                                {
                                    //设置引导线上的文本自动换行
                                    formatter(v)
                                    {
                                        let text = Math.round(v.percent) + '%' + '' + v.name
                                        if (text.length <= 6)
                                        {
                                            return text;
                                        }
                                        else if (text.length > 6 && text.length <= 12)
                                        {
                                            return text = `${text.slice(0,6)}\n${text.slice(6)}`
                                        }
                                        else if (text.length > 12 && text.length <= 18)
                                        {
                                            return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12)}`
                                        }
                                        else if (text.length > 18 && text.length <= 24)
                                        {
                                            return text = `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(18)}`
                                        }
                                        else if (text.length > 24)
                                        {
                                            return text =
                                                `${text.slice(0,6)}\n${text.slice(6,12)}\n${text.slice(12,18)}\n${text.slice(18,24)}\n${text.slice(24)}`
                                        }
                                    }
                                },

                        },
                    labelLine:
                        {
                            normal:
                                {
                                    //显示引导线
                                    show:true,
                                }
                        },
                    //设置其柱状图中各个柱形的数据，data表示从后台获取的数据
                    data: data,
                }]
        };

    //如果体表的配置项及其数据对象option不为空且option的的类型为对象或数组，则加载图表数据
    if (option && typeof option === 'object')
    {
        myChart.setOption(option);
    }

    //设置图表随着屏幕大小改变自适应
    window.addEventListener("resize",function ()
    {
        myChart.resize();
    });
}